<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    // 例1
    var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
    console.log(items.size); // 5


    // 例2
    //区分基本类型和引用（对象）类型，两个对象总是不相等的，思考下述代码
    var set = new Set();
    set.add({});
    console.log(set.size); // 1
    set.add({});
    console.log(set.size); // 2

    //例3
    var s = new Set();
    s.add(1).add(2).add(2);//链式用法
    // 注意2被加入了两次
    s.size // 2
    s.has(1); // true
    s.has(2); // true
    s.has(3); // false
    s.delete(2);
    s.has(2); // false

    //例4
    var properties = new Set();
    properties.add('width');
    properties.add('height');
    console.log(properties.size);//2
    if (properties.has('width') && properties.has('height')) {
      console.log("do something!");
    }

    //Array.from方法可以将Set结构转为数组。
    var items = new Set([1, 2, 3, 4, 5]);
    var array = Array.from(items);

    //...也可以将set转换成数组
    console.log([...(new Set([1, 2, 3, 4, 5]))]); //[1, 2, 3, 4, 5]
    //如果不加[]就是散列的元素
    console.log(...(new Set([1, 2, 3, 4, 5]))); //1, 2, 3, 4, 5


    //关于Set的遍历方法   Set的遍历顺序就是插入顺序
    var set = new Set(['red', 'green', 'blue']);
    console.log(typeof set.keys()); //注意是什么类型，是否可迭代，是否可用for...of遍历
    console.log(typeof set.values());
    console.log(typeof set.entries());

    //Set 结构没有键名，只有键值（或者说键名和键值是同一个值）
    for (var item of set.keys()) {
      console.log(item);
    }
    // red
    // green
    // blue

    for (var item of set.values()) {
      console.log(item);
    }
    // red
    // green
    // blue

    for (var item of set.entries()) {
      console.log(item);
    }

    // ["red", "red"]
    // ["green", "green"]
    // ["blue", "blue"]

    //练习：使用解构赋值，将数据提取
    for (var [key, value] of set.entries()) {
      console.log(key, value);
    }

    //Set结构的实例的forEach方法，用于对每个成员执行某种操作，没有返回值。
    var set = new Set([1, 2, 3]);
    set.forEach((value, key) => console.log(value * 2));
    // 2
    // 4
    // 6

    var arr = [3, 5, 2, 2, 5, 5];
    var unique = [...new Set(arr)];
    // [3, 5, 2]
    //而且，数组的map和filter方法也可以间接用于Set了，通过...转成数组后调用后再生成set
    var set = new Set([1, 2, 3]);
    set = new Set([...set].map(x => x * 2));
    // 返回Set结构：{2, 4, 6}
    var set = new Set([1, 2, 3, 4, 5]);
    set = new Set([...set].filter(x => (x % 2) == 0));
        // 返回Set结构：{2, 4}
  </script>
</body>

</html>